{% extends 'index.html' %}
{% block page-content %}
<div id="page-wrapper">
    <div class="row">
         <div class="col-lg-12">
              <h1 class="page-header"><i class="fa  fa-align-justify "></i> 流水作业</h1>
         </div>
                <!-- /.col-lg-12 -->
    </div>
	<div class="row">
        <div class="col-lg-11 col-md-12">
         <table class="table table-bordered">
              <thead>
                <tr>
                  <th>流水线</th>
                </tr>

              </thead>
              <tbody>
                {% for treex, treev in treeProcess.items %}
                <tr>
                  <td>
                    <button type="button" class="btn btn-primary" onclick="openMacking('{{ treex }}', this)" value="{{ treex }}" >作业</button>
                    <!-- 使用一个专门独立的按钮来打开模态框，因为与含有onclick的按钮在一起会有冲突失灵  -->
                    <input  type="hidden"class="btn btn-primary" id="helpbin" data-toggle="modal" data-target="#myModal" >
                    {{ treev.flowline_name }}
                  </td>
                  <td>
                      {% for prox, prov in treev.process_list.items %}
                        {{ prov }}&nbsp;&nbsp;&nbsp;-->&nbsp;&nbsp;&nbsp;
                      {% endfor %}
                  </td>
                </tr>
                {% endfor %}
              </tbody>
            </table>
        </div>
     </div>     

</div>
<!-- 模态框（Modal） -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <h4 class="modal-title" id="myModalLabel">作业流
</h4>
            </div>
            <div class="modal-body" id="modal-body">
                <ul class="list-group" v-for="process in processList" :key="process.id">
                    <li class="list-group-item" >
                        <i >{% templatetag openvariable %} process.abbreviation_name {% templatetag closevariable  %} </i>&nbsp;&nbsp;&nbsp;
                         <button type="button" style="float: right;" onclick="execProcess(this)" class="btn btn-primary" v-bind:value="process.process_id" >执行</button>
                                    
                     </li>
                     <li class="list-group-item">
                        
                     </li>
                </ul>

            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal -->
</div>
<script>
    
var processUl = new Vue({
    el: '#modal-body',
    data: {
        processList:[]
    }
});

function openMacking(flowline_id, oDom){
   
    $(oDom).attr({"disabled":"disabled"});
    $.ajax({
        url : 'get_macking_process',
        type : 'post',
        dataType : 'json',
        data: {'flowline_id': flowline_id},
        success : function(data){
            $(oDom).removeAttr("disabled");
            if(data.status == 1){
                $("#helpbin").click();
            processUl._data.processList = data.alongProcessList;

            }
            
        }
    });
}

function execProcess(oDom){
    $(oDom).attr({"disabled":"disabled"});
    $(oDom).parent().next().html('<p style="color:#FFA500" >执行中，你騒猴...........</p>')
    $.ajax({
        url : 'exec_macking',
        type : 'post',
        dataType : 'json',
        data: {'process_id': $(oDom).val()},
        success : function(data){
            if(data.status == 1){
                $(oDom).parent().next().html('<p style="color:#32CD32" >执行成功！</p>')
            }else if(data.status == 2){
                $(oDom).parent().next().html('<p style="color:#DC143C" >执行失败....</p>')
                $(oDom).removeAttr("disabled");
            }
            
        }
    });
}
    
</script>
{% endblock %}
